<template>
<!--  注册-->
  <div>
    <div class="zz"><p class="h3">注册</p></div>
    <div class="xx" @click="deng">
      <van-icon name="arrow-left"/>
    </div>
    <div class="shu">
      <div>
        <span class="hao" style="color:red">1.输入手机号> </span> <span>  2.输入验证码</span>
        <span> > 3.设置密码</span>
      </div>
    </div>
    <div class="kk">
    </div>

    <div>
      <van-field
          readonly
          clickable
          :value="form.farePhone"
          @touchstart.native.stop="show = true"
          placeholder="请输入手机号"
      />
      <van-number-keyboard
          v-model="form.farePhone"
          :show="show"
          :maxlength="11"
          @blur="show = false"
      />
    </div>

    <div class="yanzheng">
      <van-button type="danger" block @click="yanzhnegma">获取验证码</van-button>
    </div>
    <div>

    </div>
  </div>

</template>
<script>

import {chaxun} from "@/api/personal/personal";
import {UserRegister} from "@/api/personal/personal";
import {Toast} from "vant";


export default {
  data() {
    return {
      value: '',
      massage: '',
      show: false,
      value1: '',
      form: {
        farePhone: ''
      },

    }
  },
  created() {

  },
  methods: {
    onInput(value) {
      Toast(value);
    },
    onDelete() {
      Toast('删除');
    },
    deng() {
      this.$router.push({name: 'Login'});
    },
    yanzhnegma() {
      //判断手机号不能为空
      if (this.form.farePhone == "") {
        return this.$toast.fail('手机号不能为空');
      } else {
        chaxun(this.form.farePhone).then(res => {
          console.log(this.form.farePhone)
          const phoneRegex = /^1[3456789]\d{9}$/;
          //判断手机号是否正确
          if (!phoneRegex.test(this.form.farePhone)) {
            return this.$toast.fail('手机号格式不正确');
          }
          //判断手机号是否已经注册
          if (res.data != null) {
            return this.$toast.fail('该手机号已注册');
          }
          //执行发送验证码
          UserRegister(this.form.farePhone).then(res => {
            console.log(res)
            if (res.code === 1) {
              this.$toast.success('发送成功');
              //保存到浏览器
              sessionStorage.setItem("code", res.data);
              //发送成功跳转到设置密码页面
              // this.$router.push({path: '/EnterCode'})
              this.$router.push({path: '/EnterCode', query: {code:res,farePhone: this.form.farePhone}})
              // this.$router.push({
              //   name: 'EnterCode',
              //   query: {code: res, farePhone: this.form.farePhone}
              // });
            } else {
              this.$toast.fail('发送失败');
            }
          });
        })
      }
    }
  }
}


</script>


<style>
.zz {
  width: 100%;
  height: 50px;
  margin-top: -16px;
}

.h3 {
  margin-top: 25px;
  text-align: center;
}

.xx {
  font-size: 20px;
  margin-top: -53px;
  color: whitesmoke;
}

.shu {
  width: 100%;
  height: 40px;
  background: white;
  margin-top: 10px;
}

.hao {
  margin-left: 40px;
}

.yan {
  width: 100%;
  height: 50px;
  background: rgba(231, 228, 228, 0.98);
  margin-top: -20px;
}

.yan1 {
  text-align: center;
  line-height: 50px;
  font-size: 10px;
}

.kk {
  width: 100%;
  height: 10px;
  background: #e7e6e6;
  margin-top: -17px;
}

.yanzheng {
  margin-top: 10px;
}
</style>